
<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/img/basic/favicon.ico" type="image/x-icon">
    <title>Paper</title>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/app.css">
    <style>
        .loader {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #F5F8FA;
            z-index: 9998;
            text-align: center;
        }

        .plane-container {
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
    <!-- Js -->
    <!--
    --- Head Part - Use Jquery anywhere at page.
    --- http://writing.colin-gourlay.com/safely-using-ready-before-including-jquery/
    -->
    <script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script>
</head>
<body class="light">
<!-- Pre loader -->
<div id="loader" class="loader">
    <div class="plane-container">
        <div class="preloader-wrapper small active">
            <div class="spinner-layer spinner-blue">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>

            <div class="spinner-layer spinner-red">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>

            <div class="spinner-layer spinner-yellow">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>

            <div class="spinner-layer spinner-green">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div><div class="gap-patch">
                <div class="circle"></div>
            </div><div class="circle-clipper right">
                <div class="circle"></div>
            </div>
            </div>
        </div>
    </div>
</div>
<div id="app">
<aside class="main-sidebar fixed offcanvas shadow" data-toggle='offcanvas'>
    <section class="sidebar">
        <div class="w-80px mt-3 mb-3 ml-3">
            <img src="assets/img/basic/logo.png" alt="">
        </div>
        <div class="relative">
            <a data-toggle="collapse" href="#userSettingsCollapse" role="button" aria-expanded="false"
               aria-controls="userSettingsCollapse" class="btn-fab btn-fab-sm absolute fab-right-bottom fab-top btn-primary shadow1 ">
                <i class="icon icon-cogs"></i>
            </a>
            <div class="user-panel p-3 light mb-2">
                <div>
                    <div class="float-left image">
                        <img class="user_avatar" src="assets/img/dummy/u2.png" alt="User Image">
                    </div>
                    <div class="float-left info">
                        <h6 class="font-weight-light mt-2 mb-1">Alexander Pierce</h6>
                        <a href="#"><i class="icon-circle text-primary blink"></i> Online</a>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="collapse multi-collapse" id="userSettingsCollapse">
                    <div class="list-group mt-3 shadow">
                        <a href="index.html" class="list-group-item list-group-item-action ">
                            <i class="mr-2 icon-umbrella text-blue"></i>Profile
                        </a>
                        <a href="#" class="list-group-item list-group-item-action"><i
                                class="mr-2 icon-cogs text-yellow"></i>Settings</a>
                        <a href="#" class="list-group-item list-group-item-action"><i
                                class="mr-2 icon-security text-purple"></i>Change Password</a>
                    </div>
                </div>
            </div>
        </div>
        <ul class="sidebar-menu">
            <li class="header"><strong>MAIN NAVIGATION</strong></li>
            <li class="treeview"><a href="#">
                <i class="icon icon-sailing-boat-water purple-text s-18"></i> <span>Dashboard</span> <i
                    class="icon icon-angle-left s-18 pull-right"></i>
            </a>
                <ul class="treeview-menu">
                    <li><a href="index.html"><i class="icon icon-folder5"></i>Panel Dashboard 1</a>
                    </li>
                    <li><a href="panel-page-dashboard1-rtl.html"><i class="icon icon-folder5"></i>Panel Dashboard 1 - RTL</a>
                    </li>
                    <li><a href="panel-page-dashboard2.html"><i class="icon icon-folder5"></i>Panel Dashboard 2</a>
                    </li>
                    <li><a href="panel-page-dashboard3.html"><i class="icon icon-folder5"></i>Panel Dashboard 3</a>
                    </li>
                    <li><a href="panel-page-dashboard4.html"><i class="icon icon-folder5"></i>Panel Dashboard 4</a>
                    </li>
                    <li><a href="panel-page-dashboard5.html"><i class="icon icon-folder5"></i>Panel Dashboard 5</a>
                    </li>
                    <li><a href="panel-page-dashboard6.html"><i class="icon icon-folder5"></i>Panel Dashboard 6</a>
                    </li>
                    <li><a href="panel-page-dashboard7.html"><i class="icon icon-folder5"></i>Panel Dashboard 7</a>
                    </li>
                    <li><a href="panel-page-dashboard9.html"><i class="icon icon-folder5"></i>Panel Dashboard 9</a>
                    </li>

                </ul>
            </li>
            <li class="treeview"><a href="#">
                <i class="icon icon icon-package blue-text s-18"></i>
                <span>Products</span>
                <span class="badge r-3 badge-primary pull-right">4</span>
            </a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-products.html"><i class="icon icon-circle-o"></i>All Products</a>
                    </li>
                    <li><a href="panel-page-products-create.html"><i class="icon icon-add"></i>Add
                        New </a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#"><i class="icon icon-account_box light-green-text s-18"></i>Users<i
                    class="icon icon-angle-left s-18 pull-right"></i></a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-users.html"><i class="icon icon-circle-o"></i>All Users</a>
                    </li>
                    <li><a href="panel-page-users-create.html"><i class="icon icon-add"></i>Add User</a>
                    </li>
                    <li><a href="panel-page-profile.html"><i class="icon icon-user"></i>User Profile </a>
                    </li>
                </ul>
            </li>
            <li class="treeview no-b"><a href="#">
                <i class="icon icon-package light-green-text s-18"></i>
                <span>Inbox</span>
                <span class="badge r-3 badge-success pull-right">20</span>
            </a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-inbox.html"><i class="icon icon-circle-o"></i>All Messages</a>
                    </li>
                    <li><a href="panel7-inbox.html"><i class="icon icon-circle-o"></i>Panel7 - Inbox</a>
                    </li>
                    <li><a href="panel8-inbox.html"><i class="icon icon-circle-o"></i>Panel8 - Inbox</a>
                    </li>
                    <li><a href="panel-page-inbox-create.html"><i class="icon icon-add"></i>Compose</a>
                    </li>
                </ul>
            </li>
            <li class="header light mt-3"><strong>UI COMPONENTS</strong></li>
            <li class="treeview ">
                <a href="#">
                    <i class="icon icon-package text-lime s-18"></i> <span>Apps</span>
                    <i class="icon icon-angle-left s-18 pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="panel-page-chat.html"><i class="icon icon-circle-o"></i>Chat</a>
                    </li>
                    <li><a href="panel7-tasks.html"><i class="icon icon-circle-o"></i>Tasks / Todo</a>
                    </li>
                    <li><a href="panel-page-calendar.html"><i class="icon icon-date_range"></i>Calender</a>
                    </li>
                    <li><a href="panel-page-calendar2.html"><i class="icon icon-date_range"></i>Calender 2</a>
                    </li>
                    <li><a href="panel-page-contacts.html"><i class="icon icon-circle-o"></i>Contacts</a>
                    </li>
                    <li><a href="panel1-projects.html"><i class="icon icon-circle-o"></i>Panel1 - Projects</a>
                    </li>
                    <li><a href="panel7-projects-list.html"><i class="icon icon-circle-o"></i>Panel7 - Projects List</a>
                    </li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="icon icon-documents3 text-blue s-18"></i> <span>Pages</span>
                    <i class="icon icon-angle-left s-18 pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="#"><i class="icon icon-documents3"></i>Blank Pages<i
                            class="icon icon-angle-left s-18 pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="panel-page-blank.html"><i class="icon icon-document"></i>Simple Blank</a>
                            </li>
                            <li><a href="panel-page-blank-tabs.html"><i class="icon icon-document"></i>Tabs Blank <i
                                    class="icon icon-angle-left s-18 pull-right"></i></a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon icon-fingerprint text-green"></i>Auth Pages<i
                            class="icon icon-angle-left s-18 pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="login.html"><i class="icon icon-document"></i>Login Page 1</a>
                            </li>
                            <li><a href="login-2.html"><i class="icon icon-document"></i>Login Page 2</a>
                            </li>
                            <li><a href="login-3.html"><i class="icon icon-document"></i>Login Page 3</a>
                            </li>
                            <li><a href="login-4.html"><i class="icon icon-document"></i>Login Page 4</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon icon-bug text-red"></i>Error Pages<i
                            class="icon icon-angle-left s-18 pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="panel-page-404.html"><i class="icon icon-document"></i>404 Page</a>
                            </li>
                            <li><a href="panel-page-500.html"><i class="icon icon-document"></i>500 Page<i
                                    class="icon icon-angle-left s-18 pull-right"></i></a>
                            </li>
                            <li><a href="panel-page-error.html"><i class="icon icon-document"></i>420 Page<i
                                    class="icon icon-angle-left s-18 pull-right"></i></a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon icon-documents3"></i>Other Pages<i
                            class="icon icon-angle-left s-18 pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="panel-page-invoice.html"><i class="icon icon-document"></i>Invoice Page</a>
                            </li>
                            <li><a href="panel-page-no-posts.html"><i class="icon icon-document"></i>No Post Page</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="icon icon-goals-1 amber-text s-18"></i> <span>Elements</span>
                    <i class="icon icon-angle-left s-18 pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="panel-element-widgets.html">
                        <i class="icon icon-widgets amber-text s-14"></i> <span>Widgets</span>
                    </a>
                    </li>
                    <li><a href="panel-element-counters.html">
                        <i class="icon icon-filter_9_plus amber-text s-14"></i> <span>Counters</span>
                    </a>
                    <li><a href="panel-element-buttons.html">
                        <i class="icon icon-touch_app amber-text s-14"></i> <span>Buttons</span>
                    </a>
                    </li>
                    <li>
                        <a href="panel-element-typography.html">
                            <i class="icon icon-text-width amber-text s-14"></i> <span>Typography</span>
                        </a>
                    </li>
                    <li><a href="panel-element-tabels.html">
                        <i class="icon icon-table amber-text s-14"></i> <span>Tables</span>
                    </a>
                    </li>
                    <li><a href="panel-element-alerts.html">
                        <i class="icon icon-exclamation-circle amber-text s-14"></i> <span>Alerts</span>
                    </a>
                    </li>
                    <li><a href="panel-element-slider.html"><i class="icon icon-view_carousel amber-text s-14"></i>
                        <span>Slider</span></a></li>
                    <li><a href="panel-element-tabs.html"><i class="icon icon-folders2 amber-text s-14"></i>
                        <span>Tabs</span></a></li>
                    <li><a href="panel-element-progress-bars.html"><i class="icon icon-folders2 amber-text s-14"></i>
                        <span>Progress Bars</span></a></li>
                    <li><a href="panel-element-badges.html"><i class="icon icon-flag7 amber-text s-14"></i>
                        <span>Badges</span></a></li>
                    <li><a href="panel-element-preloaders.html"><i class="icon icon-data_usage amber-text s-14"></i>
                        <span>Preloaders</span></a></li>
                </ul>
            </li>
            <li class="treeview ">
                <a href="#">
                    <i class="icon icon-wpforms light-green-text s-18 "></i> <span>Forms & Plugins</span>
                    <i class="icon icon-angle-left s-18 pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="panel-element-forms.html"><i class="icon icon-wpforms light-green-text"></i>Bootstrap
                        Inputs</a>
                    </li>
                    <li><a href="form-jquery-validations.html"><i class="icon icon-note-important light-green-text"></i>
                        Form Validation (Jquery)</a>
                    </li>
                    <li><a href="form-bootstrap-validations.html"><i class="icon icon-note-important light-green-text"></i>
                        Form Validation (Bootstrap)</a>
                    </li>
                    <li><a href="panel-element-editor.html"><i class="icon icon-pen2 light-green-text"></i>Editor</a>
                    </li>
                    <li><a href="panel-element-toast.html"><i
                            class="icon icon-notifications_active light-green-text"></i>Toasts</a>
                    </li>
                    <li><a href="panel-element-stepper.html"><i class="icon icon-burst_mode light-green-text"></i>Stepper</a>
                    </li>
                    <li><a href="panel-element-date-time-picker.html"><i
                            class="icon icon-date_range light-green-text"></i>Date Time Picker</a>
                    </li>
                    <li><a href="panel-element-color-picker.html"><i class="icon icon-adjust light-green-text"></i>Color
                        Picker</a>
                    </li>
                    <li><a href="panel-element-range-slider.html"><i class="icon icon-space_bar light-green-text"></i>Range
                        Slider</a>
                    </li>
                    <li><a href="panel-element-select2.html"><i
                            class="icon  icon-one-finger-click light-green-text"></i>Select 2</a>
                    </li>
                    <li><a href="panel-element-tags.html"><i class="icon  icon-tags3 light-green-text"></i>Tags</a>
                    </li>
                    <li><a href="panel-element-data-tables.html"><i class="icon icon-table light-green-text"></i>Data
                        Tables</a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#">
                <i class="icon icon-bar-chart2 pink-text s-18"></i>
                <span>Charts</span>
                <i class="icon icon-angle-left s-18 pull-right"></i>
            </a>
                <ul class="treeview-menu">
                    <li>
                        <a href="panel-element-charts-js.html"><i class="icon icon-area-chart pink-text s-14"></i><span>Charts.Js</span></a>
                    </li>
                    <li>
                        <a href="panel-element-morris.html"><i class="icon icon-bubble_chart pink-text s-14"></i>Morris
                            Charts</a>
                    </li>
                    <li>
                        <a href="panel-element-echarts.html">
                            <i class="icon icon-bar-chart-o pink-text s-14"></i>Echarts</a>
                    </li>
                    <li>
                        <a href="panel-element-easy-pie-charts.html">
                            <i class="icon icon-area-chart pink-text s-14"></i>Easy Pie Charts</a>
                    </li>
                    <li>
                        <a href="panel-element-jqvmap.html">
                            <i class="icon icon-map pink-text s-14"></i>Jqvmap</a>
                    </li>
                    <li>
                        <a href="panel-element-sparklines.html">
                            <i class="icon icon-line-chart2 pink-text s-14"></i>Sparklines</a>
                    </li>
                    <li>
                        <a href="panel-element-float.html">
                            <i class="icon icon-pie-chart pink-text s-14"></i>Float Charts</a>
                    </li>
                </ul>
            </li>
            <li class="treeview"><a href="#">
                <i class="icon icon-dialpad blue-text  s-18"></i>
                <span>Extra</span>
                <i class="icon icon-angle-left s-18 pull-right"></i>
            </a>
                <ul class="treeview-menu">
                    <li>
                        <a href="panel-element-letters.html">
                            <i class="icon icon-brightness_auto light-blue-text s-14"></i>
                            <span>Avatar Placeholders</span>
                        </a>
                    </li>
                    <li>
                        <a href="panel-element-icons.html">
                            <i class="icon icon-camera2 light-blue-text s-14"></i> <span>Icons</span>
                        </a>
                    </li>
                    <li><a href="panel-element-colors.html">
                        <i class="icon icon-palette light-blue-text s-14"></i> <span>Colors</span>
                    </a>
                    </li>
                </ul>
            </li>
        </ul>
    </section>
</aside>
<!--Sidebar End-->
<div class="has-sidebar-left">
    <div class="pos-f-t">
    <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark pt-2 pb-2 pl-4 pr-2">
            <div class="search-bar">
                <input class="transparent s-24 text-white b-0 font-weight-lighter w-128 height-50" type="text"
                       placeholder="start typing...">
            </div>
            <a href="#" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-expanded="false"
               aria-label="Toggle navigation" class="paper-nav-toggle paper-nav-white active "><i></i></a>
        </div>
    </div>
</div>
    <div class="sticky">
        <div class="navbar navbar-expand navbar-dark d-flex justify-content-between bd-navbar blue accent-3">
            <div class="relative">
                <a href="#" data-toggle="push-menu" class="paper-nav-toggle pp-nav-toggle">
                    <i></i>
                </a>
            </div>
            <!--Top Menu Start -->
<div class="navbar-custom-menu">
    <ul class="nav navbar-nav">
        <!-- Messages-->
        <li class="dropdown custom-dropdown messages-menu">
            <a href="#" class="nav-link" data-toggle="dropdown">
                   <i class="icon-message "></i>
                   <span class="badge badge-success badge-mini rounded-circle">4</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu pl-2 pr-2">
                        <!-- start message -->
                        <li>
                            <a href="#">
                                <div class="avatar float-left">
                                    <img src="assets/img/dummy/u4.png" alt="">
                                    <span class="avatar-badge busy"></span>
                                </div>
                                <h4>
                                    Support Team
                                    <small><i class="icon icon-clock-o"></i> 5 mins</small>
                                </h4>
                                <p>Why not buy a new awesome theme?</p>
                            </a>
                        </li>
                        <!-- end message -->
                        <!-- start message -->
                        <li>
                            <a href="#">
                                <div class="avatar float-left">
                                    <img src="assets/img/dummy/u1.png" alt="">
                                    <span class="avatar-badge online"></span>
                                </div>
                                <h4>
                                    Support Team
                                    <small><i class="icon icon-clock-o"></i> 5 mins</small>
                                </h4>
                                <p>Why not buy a new awesome theme?</p>
                            </a>
                        </li>
                        <!-- end message -->
                        <!-- start message -->
                        <li>
                            <a href="#">
                                <div class="avatar float-left">
                                    <img src="assets/img/dummy/u2.png" alt="">
                                    <span class="avatar-badge idle"></span>
                                </div>
                                <h4>
                                    Support Team
                                    <small><i class="icon icon-clock-o"></i> 5 mins</small>
                                </h4>
                                <p>Why not buy a new awesome theme?</p>
                            </a>
                        </li>
                        <!-- end message -->
                        <!-- start message -->
                        <li>
                            <a href="#">
                                <div class="avatar float-left">
                                    <img src="assets/img/dummy/u3.png" alt="">
                                    <span class="avatar-badge busy"></span>
                                </div>
                                <h4>
                                    Support Team
                                    <small><i class="icon icon-clock-o"></i> 5 mins</small>
                                </h4>
                                <p>Why not buy a new awesome theme?</p>
                            </a>
                        </li>
                        <!-- end message -->
                    </ul>
                </li>
                <li class="footer s-12 p-2 text-center"><a href="#">See All Messages</a></li>
            </ul>
        </li>
        <!-- Notifications -->
        <li class="dropdown custom-dropdown notifications-menu">
            <a href="#" class=" nav-link" data-toggle="dropdown" aria-expanded="false">
                <i class="icon-notifications "></i>
                <span class="badge badge-danger badge-mini rounded-circle">4</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li class="header">You have 10 notifications</li>
                <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                        <li>
                            <a href="#">
                                <i class="icon icon-data_usage text-success"></i> 5 new members joined today
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon icon-data_usage text-danger"></i> 5 new members joined today
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon icon-data_usage text-yellow"></i> 5 new members joined today
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="footer p-2 text-center"><a href="#">View all</a></li>
            </ul>
        </li>
        <li>
            <a class="nav-link " data-toggle="collapse" data-target="#navbarToggleExternalContent"
               aria-controls="navbarToggleExternalContent"
               aria-expanded="false" aria-label="Toggle navigation">
                <i class=" icon-search3 "></i>
            </a>
        </li>
        <!-- Right Sidebar Toggle Button -->
        <li>
            <a class="nav-link ml-2" data-toggle="control-sidebar">
                <i class="icon-tasks "></i>
            </a>
        </li>
        <!-- User Account-->
        <li class="dropdown custom-dropdown user user-menu ">
            <a href="#" class="nav-link" data-toggle="dropdown">
                <img src="assets/img/dummy/u8.png" class="user-image" alt="User Image">
                <i class="icon-more_vert "></i>
            </a>
            <div class="dropdown-menu p-4 dropdown-menu-right">
                <div class="row box justify-content-between my-4">
                    <div class="col">
                        <a href="#">
                            <i class="icon-apps purple lighten-2 avatar  r-5"></i>
                            <div class="pt-1">Apps</div>
                        </a>
                    </div>
                    <div class="col"><a href="#">
                        <i class="icon-beach_access pink lighten-1 avatar  r-5"></i>
                        <div class="pt-1">Profile</div>
                    </a></div>
                    <div class="col">
                        <a href="#">
                            <i class="icon-perm_data_setting indigo lighten-2 avatar  r-5"></i>
                            <div class="pt-1">Settings</div>
                        </a>
                    </div>
                </div>
                <div class="row box justify-content-between my-4">
                    <div class="col">
                        <a href="#">
                            <i class="icon-star light-green lighten-1 avatar  r-5"></i>
                            <div class="pt-1">Favourites</div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="#">
                            <i class="icon-save2 orange accent-1 avatar  r-5"></i>
                            <div class="pt-1">Saved</div>
                        </a>
                    </div>
                    <div class="col">
                        <a href="#">
                            <i class="icon-perm_data_setting grey darken-3 avatar  r-5"></i>
                            <div class="pt-1">Settings</div>
                        </a>
                    </div>
                </div>
                <hr>
                <div class="row box justify-content-between my-4">
                    <div class="col">
                        <a href="#">
                            <i class="icon-apps purple lighten-2 avatar  r-5"></i>
                            <div class="pt-1">Apps</div>
                        </a>
                    </div>
                    <div class="col"><a href="#">
                        <i class="icon-beach_access pink lighten-1 avatar  r-5"></i>
                        <div class="pt-1">Profile</div>
                    </a></div>
                    <div class="col">
                        <a href="#">
                            <i class="icon-perm_data_setting indigo lighten-2 avatar  r-5"></i>
                            <div class="pt-1">Settings</div>
                        </a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
        </div>
    </div>
</div>
<div class="has-sidebar-left">
    <header class="blue accent-3 relative nav-sticky">
        <div class="container-fluid text-white">
            <div class="row">
                <div class="col">
                    <h4>
                        <i class="icon-package"></i>
                        Inbox
                    </h4>
                </div>
            </div>
            <div class="row">
                <ul class="nav nav-material nav-material-white responsive-tab" id="v-pills-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" href="#"><i class="icon icon-list"></i>All</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#modalCreateMessage" data-toggle="modal"
                           data-target="#modalCreateMessage">
                            <i class="icon icon-clipboard-add"></i> Compose New Message
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#modalCreateMessage" data-toggle="modal"
                           data-target="#modalCreateMessage"><i class="icon icon-trash-can"></i>Trash</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <div class="container-fluid animatedParent animateOnce p-0">
        <div class="animated fadeInUpShort">
            <div class="row no-gutters">
                <div class="col-md-3 white sticky">
                    <div class="sticky white">
                        <ul class="nav nav-tabs nav-material">
                            <li class="nav-item">
                                <a class="nav-link p-3 active show" id="w2--tab1" data-toggle="tab" href="#w2-tab1"><i
                                        class="icon icon-mail-envelope-closed s-18 text-success"></i>New</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-3" id="w2--tab2" data-toggle="tab" href="#w2-tab2"><i class="icon icon-star yellow-text"></i>Important</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-3" id="w2--tab3" data-toggle="tab" href="#w2-tab3"><i
                                        class="icon icon-filter text-danger"></i> Spam</a>
                            </li>
                        </ul>
                    </div>
                    <div class="slimScroll">
                        <div class="tab-content" id="v-pills-tabContent">
                            <div class="tab-pane fade show active" id="w2-tab1" role="tabpanel"
                                 aria-labelledby="w2-tab1">
                                <ul class="list-unstyled ">
                                    <li class="media p-3 b-b has-hover">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u1.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <small class="float-right">
                                                <span>10 May</span>
                                                <a href="#" class="mr-2 ml-2">
                                                    <i class="icon-star-o "></i>
                                                </a>
                                            </small>
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe </h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                        <div class="dropdown">
                                            <a class="" href="#" data-toggle="dropdown"
                                               aria-haspopup="true" aria-expanded="false">
                                                <i class="icon-more_vert p-0"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a class="dropdown-item" href="#">View
                                                    Profile </a>
                                                <a class="dropdown-item" href="#">Account
                                                    Settings </a>
                                                <a class="dropdown-item" href="#">
                                                    Earning Reports </a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Logout
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b light border-right border-primary">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u2.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <small class="float-right">
                                                <span>10 May</span>
                                                <a href="#" class="mr-2 ml-2">
                                                    <i class="icon-star-o "></i>
                                                </a>
                                                <a href="#" class="mr-2 ml-2">
                                                    <i class="icon-paperclip"></i>
                                                </a>
                                            </small>
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u3.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <small class="float-right">
                                                <span>10 May</span>
                                                <a href="#" class="mr-2 ml-2">
                                                    <i class="icon-star-o "></i>
                                                </a>
                                            </small>
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u4.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <small class="float-right">
                                                <span>10 May</span>
                                                <a href="#" class="mr-2 ml-2">
                                                    <i class="icon-star-o "></i>
                                                </a>
                                            </small>
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u5.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <small class="float-right">
                                                <span>10 May</span>
                                                <a href="#" class="mr-2 ml-2">
                                                    <i class="icon-star-o "></i>
                                                </a>
                                            </small>
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe
                                                <small class="badge badge-danger r-3">Team</small>
                                            </h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b yellow lighten-5">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u6.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <small class="float-right">
                                                <span>10 May</span>
                                                <a href="#" class="mr-2 ml-2">
                                                    <i class="icon-star-o "></i>
                                                </a>
                                            </small>
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u7.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u8.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u1.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u2.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b yellow lighten-5">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u3.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u4.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b pink lighten-5">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u5.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u6.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u7.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u8.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-pane fade" id="w2-tab2" role="tabpanel" aria-labelledby="w2-tab2">
                                <ul>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u3.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u4.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u5.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-pane fade" id="w2-tab3" role="tabpanel" aria-labelledby="w2-tab3">
                                <ul>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u9.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u11.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                    <li class="media p-3 b-b">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u10.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body text-truncate">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your  Market </span>
                                            <br>
                                            <small>Congratulations! Your update to WeRock Multipurpose</small>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9 b-l">
                    <div class="m-md-3">
                        <!--Message Start-->
                        <div class="card b-0 m-2">
                            <div class="card-body">
                                <div data-toggle="collapse" data-target="#message1">
                                    <div class="media">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u8.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your Market</span>
                                            <br>
                                            <small>Mon 9/18/2017, 9:54 PM</small>
                                            <div class="collapse my-3 show" id="message1">
                                                <div>
                                                    <p>Hello John,</p>
                                                    <p>Post-ironic shabby chic VHS, Marfa keytar flannel lomo try-hard
                                                        keffiyeh cray. Actually fap
                                                        fanny
                                                        pack yr artisan trust fund. High Life dreamcatcher church-key
                                                        gentrify. Tumblr stumptown
                                                        four dollar
                                                        toast vinyl, cold-pressed try-hard blog authentic keffiyeh
                                                        Helvetica lo-fi tilde
                                                        Intelligentsia. Lomo
                                                        locavore salvia bespoke, twee fixie paleo cliche brunch Schlitz
                                                        blog McSweeney's messenger
                                                        bag swag
                                                        slow-carb. Odd Future photo booth pork belly, you probably
                                                        haven't heard of them actually
                                                        tofu ennui
                                                        keffiyeh lo-fi Truffaut health goth. Narwhal sustainable retro
                                                        disrupt.</p>
                                                    <p>Skateboard artisan letterpress before they sold out High Life
                                                        messenger bag. Bitters chambray
                                                        leggings listicle, drinking vinegar chillwave synth. Fanny pack
                                                        hoodie American Apparel
                                                        twee. American
                                                        Apparel PBR listicle, salvia aesthetic occupy sustainable Neutra
                                                        kogi. Organic synth Tumblr
                                                        viral
                                                        plaid, shabby chic single-origin coffee Etsy 3 wolf moon
                                                        slow-carb Schlitz roof party
                                                        tousled squid
                                                        vinyl. Readymade next level literally trust fund. Distillery
                                                        master cleanse migas, Vice
                                                        sriracha
                                                        flannel chambray chia cronut.</p>
                                                    <p>Thanks,<br>Jane</p>
                                                </div>
                                                <div class="btn-group float-right">
                                                    <a class="btn btn-outline-primary btn-xs" href="#modalCreateMessage"
                                                       data-toggle="modal"
                                                       data-target="#modalCreateMessage">Forward</a>
                                                    <a class="btn btn-outline-primary btn-xs" href="#modalCreateMessage"
                                                       data-toggle="modal"
                                                       data-target="#modalCreateMessage">Reply</a>
                                                    <a class="btn btn-outline-primary btn-xs" href="#modalCreateMessage"
                                                       data-toggle="modal"
                                                       data-target="#modalCreateMessage">Save</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--Attachments Start-->
                            <div class="card-footer white">
                                <ul class="mailbox-attachments clearfix">
                                    <li>
                                        <span class="mailbox-attachment-icon"><i
                                                class="icon-document-file-pdf text-danger"></i></span>
                                        <div class="mailbox-attachment-info">
                                            <a href="#" class="mailbox-attachment-name"><i class="icon-paperclip"></i>
                                                Sep2014-report.pdf</a>
                                            <a href="#" class="btn btn-success btn-xs float-right r-3"><i class="icon-cloud-download"></i></a>
                                            <span class="mailbox-attachment-size">1,245 KB
                                            </span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="mailbox-attachment-icon"><i
                                                class="icon-document-file-doc text-primary"></i></span>
                                        <div class="mailbox-attachment-info">
                                            <a href="#" class="mailbox-attachment-name"><i class="icon-paperclip"></i>
                                                App Description.docx</a>
                                            <a href="#" class="btn btn-warning btn-xs float-right r-3"><i class="icon-cloud-download"></i></a>
                                            <span class="mailbox-attachment-size">1,245 KB</span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="mailbox-attachment-icon has-img"><img src="assets/img/demo/portfolio/p1.jpg"
                                                                                           alt="Attachment"></span>
                                        <div class="mailbox-attachment-info">
                                            <a href="#" class="mailbox-attachment-name"><i class="icon-camera"></i>
                                                photo1.png</a>
                                            <a href="#" class="btn btn-primary btn-xs float-right r-3"><i class="icon-cloud-download"></i></a>
                                            <span class="mailbox-attachment-size">2.67 MB</span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="mailbox-attachment-icon has-img"><img src="assets/img/demo/portfolio/p2.jpg"
                                                                                           alt=""></span>
                                        <div class="mailbox-attachment-info">
                                            <a href="#" class="mailbox-attachment-name"><i class="icon-camera"></i>
                                                photo2.png</a>
                                            <a href="#" class="btn btn-danger btn-xs float-right r-3"><i class="icon-cloud-download"></i></a>
                                            <span class="mailbox-attachment-size">1.9 MB</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <!--Attachments End-->
                        </div>
                        <!--Message End-->

                        <!--Message Start-->
                        <div class="card b-0  m-2">
                            <div class="card-body">
                                <div data-toggle="collapse" data-target="#message2" >
                                    <div class="media">
                                        <img class="d-flex mr-3 height-50" src="assets/img/dummy/u3.png"
                                             alt="Generic placeholder image">
                                        <div class="media-body">
                                            <h6 class="mt-0 mb-1 font-weight-normal">Doe Joe</h6>
                                            <span>Message sent via your Market profile</span>
                                            <br>
                                            <small>Mon 9/18/2017, 9:54 PM</small>
                                            <div class="collapse my-3 show" id="message2">
                                                <div>
                                                    <p>Hello John,</p>
                                                    <p>Keffiyeh blog actually fashion axe vegan, irony biodiesel.
                                                        Cold-pressed hoodie chillwave put
                                                        a bird
                                                        on it aesthetic, bitters brunch meggings vegan iPhone.
                                                        Dreamcatcher vegan scenester mlkshk.
                                                        Ethical
                                                        master cleanse Bushwick, occupy Thundercats banjo cliche ennui
                                                        farm-to-table mlkshk fanny
                                                        pack
                                                        gluten-free. Marfa butcher vegan quinoa, bicycle rights disrupt
                                                        tofu scenester chillwave 3
                                                        wolf moon
                                                        asymmetrical taxidermy pour-over. Quinoa tote bag fashion axe,
                                                        Godard disrupt migas
                                                        church-key tofu
                                                        blog locavore. Thundercats cronut polaroid Neutra tousled, meh
                                                        food truck selfies narwhal
                                                        American
                                                        Apparel.</p>
                                                    <p>Thanks,<br>Jane</p>
                                                </div>
                                                <div class="btn-group float-right">
                                                    <a class="btn btn-outline-primary btn-xs" href="#modalCreateMessage"
                                                       data-toggle="modal"
                                                       data-target="#modalCreateMessage">Forward</a>
                                                    <a class="btn btn-outline-primary btn-xs" href="#modalCreateMessage"
                                                       data-toggle="modal"
                                                       data-target="#modalCreateMessage">Reply</a>
                                                    <a class="btn btn-outline-primary btn-xs" href="#modalCreateMessage"
                                                       data-toggle="modal"
                                                       data-target="#modalCreateMessage">Save</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Message End-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Add New Message Fab Button-->
    <a href="#modalCreateMessage" data-toggle="modal"
       data-target="#modalCreateMessage" class="btn-fab btn-fab-md fab-right fab-right-bottom-fixed shadow btn-primary"><i
            class="icon-add"></i></a>
</div>
<!--Message Modal-->
<div class="modal fade" id="modalCreateMessage" tabindex="-1" role="dialog" aria-labelledby="modalCreateMessage">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content b-0">
            <div class="modal-header r-0 bg-primary">
                <h6 class="modal-title text-white" id="exampleModalLabel">Compose A New Message</h6>
                <a href="#" data-dismiss="modal" aria-label="Close"
                   class="paper-nav-toggle paper-nav-white active"><i></i></a>
            </div>
            <div class="modal-body no-p no-b">
                <form method="post">
                    <div class="form-group has-icon m-0">
                        <i class="icon-envelope-o"></i>
                        <input class="form-control form-control-lg r-0 b-0" type="text"
                               name="email" id="email" placeholder="Recipient Email Address">
                    </div>
                    <div class="b-b"></div>
                    <div class="form-group has-icon m-0">
                        <i class="icon-subject"></i>
                        <input class="form-control form-control-lg r-0 b-0" type="text"
                               name="email" id="subject" placeholder="Subject">
                    </div>
                    <textarea class="form-control r-0 b-0 p-t-40 editor" placeholder="Write Something..."
                              rows="17"></textarea>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary l-s-1 s-12 text-uppercase">
                    Send Message
                </button>
            </div>
        </div>
    </div>
</div>
<!-- Right Sidebar -->
<aside class="control-sidebar fixed white ">
    <div class="slimScroll">
        <div class="sidebar-header">
            <h4>Activity List</h4>
            <a href="#" data-toggle="control-sidebar" class="paper-nav-toggle  active"><i></i></a>
        </div>
        <div class="p-3">
            <div>
                <div class="my-3">
                    <small>25% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>45% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 45%;" aria-valuenow="45"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>60% Complete</small>
                    `
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 60%;" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>75% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 75%;" aria-valuenow="75"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="my-3">
                    <small>100% Complete</small>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-3 bg-primary text-white">
            <div class="row">
                <div class="col-md-6">
                    <h5 class="font-weight-normal s-14">Sodium</h5>
                    <span class="font-weight-lighter text-primary">Spark Bar</span>
                    <div> Oxygen
                        <span class="text-primary">
                                                    <i class="icon icon-arrow_downward"></i> 67%</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <canvas width="100" height="70" data-chart="spark" data-chart-type="bar"
                            data-dataset="[[28,68,41,43,96,45,100,28,68,41,43,96,45,100,28,68,41,43,96,45,100,28,68,41,43,96,45,100]]"
                            data-labels="['a','b','c','d','e','f','g','h','i','j','k','l','m','n','a','b','c','d','e','f','g','h','i','j','k','l','m','n']">
                    </canvas>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table id="recent-orders" class="table table-hover mb-0 ps-container ps-theme-default">
                <tbody>
                <tr>
                    <td>
                        <a href="#">INV-281281</a>
                    </td>
                    <td>
                        <span class="badge badge-success">Paid</span>
                    </td>
                    <td>$ 1228.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-01112</a>
                    </td>
                    <td>
                        <span class="badge badge-warning">Overdue</span>
                    </td>
                    <td>$ 5685.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-281012</a>
                    </td>
                    <td>
                        <span class="badge badge-success">Paid</span>
                    </td>
                    <td>$ 152.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-01112</a>
                    </td>
                    <td>
                        <span class="badge badge-warning">Overdue</span>
                    </td>
                    <td>$ 5685.28</td>
                </tr>
                <tr>
                    <td>
                        <a href="#">INV-281012</a>
                    </td>
                    <td>
                        <span class="badge badge-success">Paid</span>
                    </td>
                    <td>$ 152.28</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="sidebar-header">
            <h4>Activity</h4>
            <a href="#" data-toggle="control-sidebar" class="paper-nav-toggle  active"><i></i></a>
        </div>
        <div class="p-4">
            <div class="activity-item activity-primary">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 5 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit amet conse ctetur which ascing elit users.</p>
                </div>
            </div>
            <div class="activity-item activity-danger">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 8 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit ametcon the sectetur that ascing elit users.</p>
                </div>
            </div>
            <div class="activity-item activity-success">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 10 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit amet cons the ecte tur and adip ascing elit users.</p>
                </div>
            </div>
            <div class="activity-item activity-warning">
                <div class="activity-content">
                    <small class="text-muted">
                        <i class="icon icon-user position-left"></i> 12 mins ago
                    </small>
                    <p>Lorem ipsum dolor sit amet consec tetur adip ascing elit users.</p>
                </div>
            </div>
        </div>
    </div>
</aside>
<!-- /.right-sidebar -->
<!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
<div class="control-sidebar-bg shadow white fixed"></div>
</div>
<!--/#app -->
<script src="assets/js/app.js"></script>
<!--
--- Footer Part - Use Jquery anywhere at page.
--- http://writing.colin-gourlay.com/safely-using-ready-before-including-jquery/
-->
<script>(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script>
</body>
</html>